<template>
    <div class="accounting">
        <div class="nav-bar" :style="{ top: AppNavShow ? '3.5rem' : 0 }">
            <nuxt-link :to="backUrl" class="left">
                <van-icon name="arrow-left" color="#000000" size="1.5rem" />
            </nuxt-link>
            <div class="centent"></div>
            <div class="right"></div>
        </div>

        <div class="title">手机号登录</div>

        <div class="form">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="loginForm.mobile"
                    name="手机号"
                    type="number"
                    label=""
                    placeholder="请填写手机号"
                    :rules="[{ required: true, message: '' }]"
                />
                <van-field
                    v-if="tabsIndex == 0"
                    v-model="loginForm.code"
                    type="number"
                    name="验证码"
                    label=""
                    placeholder="请填写验证码"
                    :rules="[{ required: true, message: '' }]"
                >
                    <template #button>
                        <div
                            size="small"
                            type="primary"
                            @click="getCode"
                            style="color: #0177fd"
                        >
                            {{ codeTest }}
                        </div>
                    </template>
                </van-field>
                <van-field
                    v-if="tabsIndex == 1"
                    v-model="loginForm.password"
                    type="password"
                    name="密码"
                    label=""
                    placeholder="请填写密码"
                    :rules="[{ required: true, message: '' }]"
                >
                </van-field>
                <div style="margin: 2rem 16px 0">
                    <van-button round block type="info" native-type="submit">
                        登录
                    </van-button>
                    <div
                        v-if="tabsIndex == 0"
                        class="tis"
                        @click="tabsIndex = 1"
                    >
                        密码登录
                    </div>
                    <div
                        v-if="tabsIndex == 1"
                        class="tis"
                        @click="tabsIndex = 0"
                    >
                        验证码登录
                    </div>
                </div>
            </van-form>
        </div>
        <div class="wx-tip">
            登录即代表您已同意
            <span @click="goxieyi(1)">《小竹用户协议》</span>
            <span @click="goxieyi(2)">《用户隐私协议》</span>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { Toast } from "vant";
import {
    pcRegister,
    userMobilelogin,
    userLogin,
    userChangepwd,
    getAppletCode,
    check_appletcache,
    make_ticket,
    smsSend,
    wxfollowloginCode,
    wxfollowloginApi,
    get_follow_openid,
    follow_login,
} from "@/assets/api/indexApi.js";
import { goTop } from "@/assets/utils/utils";
import { mapMutations } from "vuex";
import mixinsUser from "~/mixins/user";
export default {
    async asyncData({ params, query }) {
        let data = {};

        return data;
    },

    head() {
        return {
            title: "登陆-【小竹财税平台】",
            meta: [],
        };
    },
    layout: "home",
    components: {},
    data() {
        return {
            username: "",
            password: "",
            codeTest: "获取验证码",
            loginForm: {
                mobile: null,
                code: "",
                password: "",
                agree: "0",
                passwordNew: "",
                passwordNew2: "",
            },
            tabsIndex: 0, // 0 快捷登录 1 密码登录 2 注册账户 3 找回密码

            loginSwitch: true,
        };
    },
    mixins: [mixinsUser],
    computed: {
        ...mapState("common", {
            AppNavShow: (state) => state.AppNavShow,
        }),
        backUrl: function () {
            return this.$route.query.url ? this.$route.query.url : "/";
        },
    },
    created() {},
    mounted() {
        let codeTime = localStorage.getItem("codeTime");
        if (codeTime && parseInt(codeTime) > 0) {
            this.codeTimeout(parseInt(codeTime));
        }
    },
    watch: {},
    methods: {
        async onSubmit(values) {
            if (!this.loginSwitch) return;
            this.loginSwitch = false;
            console.log("submit", values);
            if (this.tabsIndex == 0)
                var res = await userMobilelogin({
                    mobile: parseFloat(this.loginForm.mobile),
                    captcha: parseFloat(this.loginForm.code),
                });
            if (this.tabsIndex == 1)
                var res = await userLogin({
                    account: parseFloat(this.loginForm.mobile),
                    password: this.loginForm.password,
                });
            this.submitDisabled = false;
            this.loginSwitch = true;
            if (res.code == 1) {
                localStorage.setItem("token", res.data.token);

                this.openWebPage();

                let path = this.$route.query.url ? this.$route.query.url : "/";
                this.$router.replace({
                    path: path,
                });
            } else {
                Toast(res.msg);
                return;
            }
        },

        // 获取验证码
        async getCode() {
            if (!this.loginForm.mobile) {
                Toast("请输入手机号");
                return;
            }
            var reg = /^1[3456789]\d{9}$/;
            if (!reg.test(this.loginForm.mobile)) {
                Toast("手机号码有误");

                return;
            }

            let parems = {
                mobile: this.loginForm.mobile,
            };

            parems.event = "mobilelogin";

            if (this.codeTest == "获取验证码") {
                this.codeTest = "发送中";
                const res = await smsSend(parems);

                if (res.code == 1) {
                    Toast(res.msg);

                    this.codeTimeout(60);
                } else {
                    this.codeTest = "获取验证码";
                    // this.$alert(res.msg, "", {
                    //     confirmButtonText: "确定",
                    // });
                }
            }
        },

        codeTimeout(e) {
            localStorage.setItem("codeTime", e);
            if (e > 0) {
                this.codeTest = e + "s";
                setTimeout(() => {
                    this.codeTimeout(e - 1);
                }, 1000);
            } else {
                this.codeTest = "获取验证码";
            }
        },

        // 用户协议跳转
        goxieyi(e) {
            if (e == 1) {
                window.open(
                    "https://api.xiaozhucaishui.com/xieyi/user",
                    "_blank"
                );
            } else {
                window.open(
                    "https://api.xiaozhucaishui.com/xieyi/privacy",
                    "_blank"
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.nav-bar {
    width: 100%;
    position: sticky;

    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 2.75rem;
    .left,
    .right {
        width: 15%;
    }

    .centent {
        font-weight: 600;
        font-size: 1.31rem;
        color: #333333;
    }
}

.title {
    width: 82%;
    margin: 0 auto;
    font-weight: 500;
    font-size: 1.43rem;
    color: #333333;
    padding-top: 1.2rem;
}

.form {
    width: 82%;
    padding-top: 1.2rem;
    margin: 0 auto;
}

::v-deep .van-cell {
    padding-left: 0;
}

.tis {
    font-size: 0.875rem;
    color: #999999;
    text-align: center;
    padding-top: 2rem;
}

.wx-tip {
    position: fixed;
    bottom: 2rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: #9e9e9e;
    span {
        color: #317cfe;
    }
}
</style>